import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Image } from 'react-native';
import { pxToDp } from '../../../utils/stylesKits';
import SvgUri from 'react-native-svg-uri';
import { male, female } from '../../../res/font/iconSvg';
import { Input } from 'react-native-elements';
import DatePicker from 'react-native-datepicker';
import Geo from '../../../utils/Geo';
import Picker from 'react-native-picker';
import CityJson from '../../../res/citys.json';
import THButton from '../../../components/THButton';
import Toast from '../../../utils/Toast';
import ImagePicker from 'react-native-image-crop-picker';
import { Overlay } from 'teaset';
import { inject, observer } from 'mobx-react';
import request from '../../../utils/request';
import { ACCOUNT_CHECKHEADIMAGE, ACCOUNT_REGINFO } from '../../../utils/pathMap';
import JMessage from '../../../utils/JMessage';

@inject('RootStore')
@observer

class Index extends Component {
    state = {
        // 昵称
        nickname: "",
        // 性别
        gender: "男",
        // 生日
        birthday: "",
        // 城市
        city: "",
        // 头像
        header: "",
        // 经度
        lng: "",
        // 纬度
        lat: "",
        // 详细的地址
        address: ""
    }

    async componentDidMount() {
        const res = await Geo.getCityByLocation();

        const address = res.regeocode.formatted_address;
        const city = res.regeocode.addressComponent.city.replace("市", "");
        const lng = res.regeocode.addressComponent.streetNumber.location.split(",")[0];
        const lat = res.regeocode.addressComponent.streetNumber.location.split(",")[1];
        this.setState({
            address,
            city,
            lng,
            lat
        })
    }

    // 选择性别
    chooseGender = (gender) => {
        this.setState({ gender });
    }

    // 选择城市
    showCityPicker = () => {
        Picker.init({
            // 要显示哪些数据 全国城市数据
            pickerData: CityJson,
            // 默认选择哪个数据
            selectedValue: ["北京", "北京"],
            wheelFlex: [1, 1, 0], // 显示省和市
            pickerConfirmBtnText: "确定",
            pickerCancelBtnText: "取消",
            pickerTitleText: "选择城市",
            onPickerConfirm: data => {
                // data =  [广东，广州，天河]
                this.setState(
                    {
                        city: data[1]
                    }
                );
            }
        });
        Picker.show();
    }

    // 点击设置头像按钮
    chooseHeadImg = async () => {
        // 1.校验 用户的昵称 生日 当前地址city
        // 2.使用图片裁剪插件
        // 3.将选择好的图片上传到后台
        // 4.将state中的数据 头像的地址 提交到后台->完成信息填写
        // 5.成功 (1)执行极光的注册和登录 (2)跳转到交友-首页
        const { nickname, birthday, city } = this.state;
        if (!nickname || !birthday || !city) {
            Toast.sad('昵称或者生日或者城市不合法', 2000, 'center');
            return;
        }

        // 获取到选中后的图片
        const image = await ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
        });

        let overlayViewRef = null;
        // 显示审核中的效果
        let overlayView = (
            <Overlay.View
                style={{ flex: 1, backgroundColor: '#000' }}
                modal={true}
                overlayOpacity={0}
                ref={v => overlayViewRef = v}
            >
                <View style={{
                    marginTop: pxToDp(30),
                    alignSelf: 'center',
                    width: pxToDp(334),
                    height: pxToDp(334),
                    position: 'relative',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Image style={{
                        width: '100%',
                        height: '100%',
                        position: 'absolute',
                        left: 0,
                        top: 0,
                        zIndex: 100
                    }} source={require('../../../res/scan.gif')} />
                    {/* image.path */}
                    <Image source={{ uri: image.path }} style={{ width: '60%', height: '60%' }} />
                </View>
            </Overlay.View>
        );
        Overlay.show(overlayView);

        // 上传头像
        const res0 = await this.uploadHeadImg(image);

        // console.log(res0);
        // 是否上传头像成功
        if (res0.code !== "10000") {
            // 失败
            return;
        }
        // 构造参数 完善个人信息
        let params = this.state;
        params.header = res0.data.headImgPath;
        // console.log(params);

        const res1 = await request.privatePost(ACCOUNT_REGINFO, params);
        // console.log(res1);
        if (res1.code !== '10000') {
            return
        }

        // 注册极光 用户名 this.props.RootStore.userId  密码：默认 用户的手机号码
        const res2 = await this.jgBusiness(this.props.RootStore.userId, this.props.RootStore.mobile);
        // console.log(res2);

        // 关闭审核图层
        overlayViewRef.close();
        // 给用户提示
        Toast.smile('恭喜 操作成功', 2000, 'center');
        // 跳转到交友页面
        setTimeout(() => {
            // this.props.navigation.navigate("Tabbar");
            this.props.navigation.reset({
                routes: [{ name: 'Tabbar' }]
            })
        }, 2000)

    }

    // 上传头像
    uploadHeadImg = (image) => {
        // 构造参数 发送到后台 完成头像上传
        let formData = new FormData();
        formData.append('headPhoto', {
            // 本地图片的地址
            uri: image.path,
            // 图片的类型
            type: image.mime,
            // 图片的名称
            name: image.path.split('/').pop()
        });
        // 执行头像上传
        return request.privatePost(ACCOUNT_CHECKHEADIMAGE, formData, {
            headers: {
                "Content-Type": "multipart/form-data",
            }
        });
    }

    // 执行极光的注册
    jgBusiness = async (username, password) => {
        // 在App里面 进行极光初始化
        return JMessage.register(username, password);
    }

    render() {
        const { gender, nickname, birthday, city } = this.state;
        const dateNow = new Date();
        const currentDate = `${dateNow.getFullYear()}-${dateNow.getMonth() + 1}-${dateNow.getDate()}`;
        return (
            <View style={{ backgroundColor: '#fff', flex: 1, padding: pxToDp(20) }}>
                {/* 标题 */}
                <Text style={{ fontSize: pxToDp(20), color: '#666', fontWeight: 'bold', marginTop: pxToDp(30) }}>填写资料</Text>
                <Text style={{ fontSize: pxToDp(20), color: '#666', fontWeight: 'bold' }}>提升我的魅力</Text>
                {/* 性别 */}
                <View style={{ marginTop: pxToDp(40) }}>
                    <View style={{ justifyContent: 'space-around', width: '80%', flexDirection: 'row', alignSelf: 'center' }}>
                        <TouchableOpacity onPress={this.chooseGender.bind(this, '男')} style={{ width: pxToDp(80), height: pxToDp(80), borderRadius: pxToDp(40), backgroundColor: gender === '男' ? 'red' : '#eee', justifyContent: 'center', alignItems: 'center' }}>
                            <SvgUri svgXmlData={male} width="50" height="50" />
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.chooseGender.bind(this, '女')} style={{ width: pxToDp(80), height: pxToDp(80), borderRadius: pxToDp(40), backgroundColor: gender === '女' ? 'red' : '#eee', justifyContent: 'center', alignItems: 'center' }}>
                            <SvgUri svgXmlData={female} width="50" height="50" />
                        </TouchableOpacity>
                    </View>
                </View>
                {/* 昵称 */}
                <View style={{ marginTop: pxToDp(30) }}>
                    <Input
                        value={nickname}
                        placeholder='设置昵称'
                        placeholderTextColor='#afafaf'
                        onChangeText={(nickname) => this.setState({ nickname })}
                    />
                </View>
                {/* 日期 */}
                <View style={{ marginTop: pxToDp(16) }}>
                    <DatePicker
                        androidMode="spinner"
                        style={{ width: "100%" }}
                        date={birthday}
                        mode="date"
                        placeholder="设置生日"
                        format="YYYY-MM-DD"
                        minDate="1900-01-01"
                        maxDate={currentDate}
                        confirmBtnText="确定"
                        cancelBtnText="取消"
                        customStyles={{
                            dateIcon: {
                                display: 'none'
                            },
                            dateInput: {
                                marginLeft: pxToDp(9),
                                marginRight: pxToDp(8),
                                borderWidth: 0,
                                borderBottomWidth: pxToDp(1.1),
                                alignItems: 'flex-start',
                                paddingLeft: pxToDp(4),
                            },
                            placeholderText: {
                                fontSize: pxToDp(16),
                                color: '#afafaf'
                            },
                            // ... You can check the source to find the other keys.
                        }}
                        onDateChange={(birthday) => { this.setState({ birthday }) }}
                    />
                </View>
                {/* 地址 */}
                <View style={{ marginTop: pxToDp(30) }}>
                    <TouchableOpacity onPress={this.showCityPicker}>
                        <Input
                            value={"当前定位:" + city}
                            inputStyle={{ color: '#666' }}
                            disabled={true}
                        />
                    </TouchableOpacity>
                </View>
                {/* 选择头像 */}
                <View style={{ marginTop: pxToDp(28), paddingLeft: pxToDp(6), paddingRight: pxToDp(6) }}>
                    <THButton
                        onPress={this.chooseHeadImg}
                        style={{
                            height: pxToDp(50),
                            borderRadius: pxToDp(25),
                            alignSelf: 'center'
                        }}
                    >设置头像</THButton>
                </View>
            </View>
        );
    }
}

export default Index;